<template>
    <div class="jd-cart">
        <Navbar title="购物车">
            <template>
                <span @click="$router.push('/')">首页</span>
            </template>
        </Navbar>
        <Nodata :show='isDisplay'/>
        <!-- 栅格布局 -->
        <van-swipe-cell 
            v-for="(item,idx) in cartArr" 
            :key="item._id">
            <van-row  
                type="flex" 
                align="center">
                <van-col span="4">
                    <!-- 使用v-model给“列表中的行添加自定义的勾选状态” -->
                    <van-checkbox @click="singleChecked" v-model="item.checked"></van-checkbox>
                </van-col>
                <van-col span="20">
                    <!-- 商品卡片S -->
                    <van-card
                        :num="item.num"
                        :price="(item.good.price).toFixed(2)"
                        :desc="item.good.desc"
                        :title="item.good.name"
                        :thumb="$img.baseUrl+item.good.img"
                    >
                        <template #footer>
                            <div class="hot" @click="updateGoods(item,idx,1)">
                                <van-button size="mini">+</van-button>
                            </div>
                            <div class="hot" @click="updateGoods(item,idx,-1)">
                                <van-button size="mini">-</van-button>
                            </div>
                        </template>
                    </van-card>
                    <!-- 商品卡片E -->
                </van-col>
            </van-row>
            <template #right>
                <van-button class="delete-button" @click="delCarts(item,idx)" square type="danger" text="删除" />
            </template>
        </van-swipe-cell>

        <van-submit-bar :price="total" button-text="提交订单" @submit="onSubmit">
            <van-checkbox @click="fullChecked" v-model="checked">全选</van-checkbox>
            <template #tip>
                你的收货地址不支持同城送, <span @click="onClickEditAddress">修改地址</span>
            </template>
        </van-submit-bar>
    </div>
</template>
<script>
import {
    Card,
    Checkbox,
    SubmitBar,
    Col,
    Row,
    Button,
    SwipeCell
}from 'vant'
import {Navbar} from '@/components/'
import {Nodata} from '@/components/'
export default {
   data() {
      return {
          checked:false,
          cartArr:[],
          isDisplay:false
      }
   },
   components:{
       [Card.name]:Card,
       [Checkbox.name]:Checkbox,
       [SubmitBar.name]:SubmitBar,
       [Col.name]:Col,
       [Row.name]:Row,
       [Button.name]:Button,
       [SwipeCell.name]:SwipeCell,
       Navbar,
       Nodata
   },
   created(){
       this.$http.fetchCartList().then(res=>{
          if(res){
              console.log(res.list);
              this.cartArr=res.list
              //判断列表长度来确定是否显示空购物车
              this.isDisplay=(this.cartArr.length==0)
          }
       })
   },
   computed:{
       //计算总价格
       total(){
            let t=0
            this.cartArr.map(ele=>{
            if(ele.checked){
                t+=ele.num*ele.good.price
            }
        })
            return t*100//由于单位是分,所以要乘100
       }
   },
   beforeDestroy(){
       clearTimeout(this.timer)
   },
   methods:{
       //提交订单功能
       onSubmit(){
           //判断是否有选择物品
           if(this.total<=0) return this.$toast('请勾选商品')
           var i=''
           this.cartArr.map(ele=>{
               if(ele.checked){
                   //post不支持数组，所以选择用;来进行拼接
                   i+=';'+ele._id
               }
           })
            this.$http.fetchPay({ids:i}).then(()=>{
                this.$toast('订单已生成');
                this.timer=setTimeout(()=>{
                    this.$router.push('/user')
                },1000)
            })
       },
       //修改地址功能
       onClickEditAddress(){
           console.log('修改地址');
       },
       //全选
       fullChecked(){
           this.cartArr.map(ele=>{
               ele.checked=this.checked
           })
           //this.$forceUpdate()
           //这个方法深复制，能解决this.$forceUpdate()解决不了的
           this.cartArr=JSON.parse(JSON.stringify(this.cartArr))
       },
       isFull(){
           //用来计数被选中的个数
           let count=0
           this.cartArr.map(ele=>{
               if(ele.checked) count++
           })
           //判断被选中的个数是否等于列表的长度，并把结果赋给全选按钮
           this.checked=(count==this.cartArr.length)
           //强制更新，因为vue响应式的缺陷,导致复杂数据类型改变的时候，视图没有更新
           this.$forceUpdate()
           this.isDisplay=(this.cartArr.length==0)
           //判断都没有选中的时候,全选按钮变为false
           if(count==0) this.checked=false
       },
       //单选功能
       singleChecked(){
           this.isFull()
       },
       //删除功能
       delCarts(item,idx){
           this.$dialog.confirm({
            title: '提醒',
            message: `确认要删除${item.good.name}么`,
            })
            .then(() => {
                // on confirm
                this.$http.fetchDelList({id:item._id}).then(()=>{
                    this.$toast.success('删除成功')
                    //直接在页面上删除,如果重新调接口，那么之前做的操作全部没有了
                    this.cartArr.splice(idx,1)
                    this.isFull()
                })
            })
       },
       //增加或减少物品
       updateGoods(item,idx,num){
           let data={
               id:item._id,
               num:item.num+num
           }
           if(data.num<1){
               this.$toast('商品数不能小于1')
            }else{
                this.$http.fetchUpdate(data).then(()=>{
                    this.cartArr[idx].num=item.num+num
                })
            }

       }
   },
}
</script>
<style lang="scss" scoped>
.jd-cart{
    padding-bottom: 2.133333rem;
}
.hot{
    display: inline-block;
    width: .666667rem;
    box-sizing: border-box;
    padding-right: .133333rem;
}
.delete-button {
    height: 100%;
}
</style>
